<template>
  <div>
    <search-form
      ref="searchForm"
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
      @visible-change="handleVisibleChange"
    />
    <table-box ref="tableBox" show-index show-selection :other-filters="comFiltersRaw" :other-raw="comParamsRaw" :table-config="tableConfig" @selection-change="handleSelectionChange" @btnOperate="handleBtnOperate" />
  </div>
</template>
<script>
export default {
  name: 'RetailCustomer',
  components: {
  },
  props: {
    tabIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      searchConfig: [
        { label: '客户编码', prop: 'code', type: 'text', value: '', operator: 'in', placeholder: '支持批量查询' },
        { label: '客户名称', prop: 'name', type: 'text', value: '', placeholder: '支持模糊查询' },
        {
          label: '所属办事处',
          prop: 'agencyCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          operator: '=',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        {
          type: 'dialog',
          prop: 'oneCategoryCode',
          label: '客户一级分类',
          value: '',
          placeholder: '',
          operator: '=',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/custDocDef/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '客户一级分类',
            interfacePath: '/select-service/api/v1/custDocDef/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ id: 'custDocCode', property: 'custDocCode', value: 'QY023', operator: '=' }],
            pageFlag: true
          }
        },
        {
          type: 'dialog',
          prop: 'twoCategoryCode',
          label: '客户二级分类',
          value: '',
          placeholder: '',
          operator: '=',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/custDocDef/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '客户二级分类',
            interfacePath: '/select-service/api/v1/custDocDef/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ id: 'custDocCode', property: 'custDocCode', value: 'QY024', operator: '=' }],
            pageFlag: true
          }
        },
        {
          type: 'select',
          prop: 'businessTypeCode',
          label: '客户经营类型',
          value: '',
          placeholder: '',
          filter: false,
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/BIZ_TYPE`,
            multiple: true,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'select',
          prop: 'businessStatus',
          label: '客户营业状态',
          value: '',
          placeholder: '',
          operator: '=',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/custDocDef/page',
            paramField: 'keyWord', // 远程搜索参数名
            paramsType: 1,
            filtersRaw: [{ id: 'custDocCode', property: 'custDocCode', value: 'SLCM027', operator: '=' }],
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          }
          // dialogConfig: {
          //   title: '客户营业状态',
          //   interfacePath: '/select-service/api/v1/custDocDef/page',
          //   setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
          //   filtersRaw: [{ id: 'custDocCode', property: 'custDocCode', value: 'SLCM027', operator: '=' }],
          //   pageFlag: true
          // }
        }
      ],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/ctmMdmCustomer/page`,
        hideSearchBar: true,
        tabIndex: 1,
        buttonGroupCode: 'retail_customer',
        sort: 'creationTime',
        order: 'DESC',
        apiHeader: {
          'Permission-PerCode': 'customer',
          'Permission-App': 'slm'
        },
        setting: [
          {
            prop: 'code',
            label: '客户编码',
            className: 'btn-green',
            minWidth: 120,
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'name',
            label: '客户名称',
            minWidth: 130
          },
          {
            prop: 'agencyName',
            label: '所属办事处',
            minWidth: 130
          },
          {
            prop: 'creationTime',
            label: '加盟时间',
            minWidth: 140
          },
          {
            prop: 'contactName',
            label: '经销商姓名',
            minWidth: 120
          },
          {
            prop: 'businessTypeName',
            label: '客户经营类型',
            minWidth: 130
          },
          {
            prop: 'operateArea',
            label: '客户经营总面积',
            minWidth: 140
          },
          {
            prop: 'businessStatus',
            label: '营业状态',
            minWidth: 120,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: row.businessStatus,
                  docCode: 'SLCM027',
                  label: row.businessStatusName
                }
              })
            }
          },
          {
            prop: 'oneCategoryName',
            label: '客户一级分类',
            minWidth: 140,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: row.oneCategory,
                  docCode: 'QY023',
                  label: row.oneCategoryName
                }
              })
            }
          },
          {
            prop: 'twoCategoryName',
            label: '客户二级分类',
            minWidth: 140,
            render: (h, row) => {
              return h('c-mdm-view', {
                props: {
                  value: row.twoCategory,
                  docCode: 'QY024',
                  label: row.twoCategoryName
                }
              })
            }
          },
          {
            prop: 'status',
            label: '启用状态',
            minWidth: 100,
            formatData: row => {
              return row.status === 1 || row.status === '1' ? '启用' : '停用'
            }
          }
        ],
        btnList: process.env.NODE_ENV === 'development' ? [
          { buttonName: '编辑', optCode: 'edit', outerFlag: true }
        ] : null
      },
      selectedRows: [],
      filtersRaw: [{ id: 'oneCategoryCode', property: 'oneCategoryCode', value: 'Z230', operator: '<>' }],
      paramsRaw: {},
      defaultFiltersRaw: [{ id: 'oneCategoryCode', property: 'oneCategoryCode', value: 'Z230', operator: '<>' }]
    }
  },
  computed: {
    comFiltersRaw() {
      const t = [...this.filtersRaw]
      return t
    },
    comParamsRaw() {
      return this.paramsRaw
    }
  },
  created() {
    this.$set(this.tableConfig, 'tabIndex', this.tabIndex)
  },
  mounted() {
    // this.refreshTableBoxData()
  },
  methods: {
    clearSearch() {
      this.filtersRaw = []
      this.paramsRaw = []
    },
    handleSearch({ filtersRaw, paramsRaw }) {
      this.filtersRaw = this.$batchFiltersRawHandle(filtersRaw, 'code')
      this.filtersRaw.push(...this.defaultFiltersRaw)
      if (paramsRaw.businessTypeCode && paramsRaw.businessTypeCode.length > 0) {
        paramsRaw.businessTypeCode.forEach((e, i) => {
          this.filtersRaw.push({ id: `businessTypeCode${i}`, property: 'businessTypeCode', value: e, operator: 'like' })
        })
        delete paramsRaw.businessTypeCode
      }
      this.paramsRaw = paramsRaw
      this.refreshTableBoxData()
    },
    handleVisibleChange() {
      this.refreshTableHeight()
    },
    refreshTableBoxData(flag) {
      this.$nextTick(() => {
        this.$refs.tableBox && this.$refs.tableBox.initTableData(flag)
      })
    },
    refreshTableHeight() {
      this.$refs.tableBox && this.$refs.tableBox.refreshTableHeight()
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handleBtnOperate(flag) {
      this[flag] && this[flag]()
    },
    edit() {
      if (!this.singleJudge(this.selectedRows, '编辑', true)) {
        return
      }
      this.$pageStack.push('src/views/channelTask2/dealerMarketingInfo/customer/components/edit.vue', {
        props: {
          id: this.selectedRows[0].code
        }
      }, (flag) => {
        flag && this.refreshTableBoxData(flag)
      })
    },
    toDetail(row) {
      this.$pageStack.push('src/views/channelTask2/dealerMarketingInfo/customer/components/detail/index.vue', {
        props: {
          code: row.code
        }
      })
    },
    handleExportSuccess() {

    }
  }
}
</script>
